<template>
  <div id="app">
		<div class="dw">
			<i class="iconfont icon-dingbu"></i>
		</div>
    <router-view/>
    <footer @click="ppp" class="foot">
      <router-link tag="p" to="/" >
        <i class="iconfont icon-eliaomo"></i>
        <span>外卖</span>
      </router-link>
      <router-link tag="p" to="/fx">
        <i class="iconfont icon-compass"></i>
        <span>发现</span>
      </router-link>
      <router-link tag="p" to="/ddan" >
        <i class="iconfont icon-icon-"></i>
        <span>订单</span>
      </router-link>
      <router-link tag="p" to="/me" >
        <i class="iconfont icon-wode2"></i>
        <span>我的</span>
      </router-link>
    </footer>
  </div>
</template>

<script>
export default {
		data() {
			return {

			}
		},
		methods: {
			//事件
			ppp(e){
				for(var i=0;i<this.pp.length;i++){
						this.pp[i].style.color = "#9c9c9c";
				}
				if(e.target.tagName=="P"){
					e.target.style.color = "#0699ff";
				}
				if(e.target.parentNode.tagName=="P"){
					e.target.parentNode.style.color = "#0699ff";
				}
			},
		},
		mounted(){
			//原生js
			this.pp=document.querySelectorAll(".foot>p");
			var dw=document.querySelector(".dw");
			window.onscroll = function(){
				this.scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
				if(this.scrollTop>300){
					dw.style.display = "block"
				}else{
					dw.style.display = "none"
				}
			};
			function move(){
				var timer = setInterval(function(){
					var moveScrollTop = document.body.scrollTop||document.documentElement.scrollTop;
					var speed =Math.floor(-(moveScrollTop-0)/10);
					if(moveScrollTop <=0){
						clearInterval(timer);
						timer = undefined;
					}else{
						document.documentElement.scrollTop = moveScrollTop + speed;
						document.body.scrollTop = moveScrollTop + speed;
					}
				},10);
			};
			dw.onclick = function(){
				move();
			}
		}
	}
</script>

<style lang="less">
  .px2rem(@name, @px){
    @{name}: @px / 37.5 * 1rem;
  }
  #app{
  	.px2rem(margin-bottom,51);
  }
  .foot{
  	z-index: 666;
    position:fixed;
    width:100%;
    bottom:0;
    box-shadow:0 0 15px #ccc;
    background: #fff;
    .px2rem(height,55);
    display:flex;
    p{
      color:#9c9c9c;
      flex:1;
      display:flex;
      justify-content:center;
      align-items:center;
      flex-direction:column;
      &:first-child{
        color:#0699ff;
      }
      i{
        .px2rem(font-size,20);
      }
      span{
        .px2rem(font-size,12);
        .px2rem(margin-top,5);
      }
    }

  }
	.dw{
		.px2rem(width,42);
		.px2rem(height,42);
		border-radius:50% ;
		display: flex;
		z-index: 666;
		justify-content: center;
		align-content: center;
		position: fixed;
		.px2rem(right,20);
		.px2rem(bottom,80);
		display: none;
		i{
			.px2rem(font-size,41);
			color: #666666;
		}
	}
</style>
